import React from "react"
import ShoucangPlayer_Navbar from "./shoucangPlayer_Navbar"
// import ShoucangPlayer_Tabs from "./shoucangPlayer_Tabs"
import myStyle from "../../style/My.module.css"

import {get_geshou_zhuanji,get_geshou_50songs,get_geshou_info} from "../../../../api"
import queryString from "query-string"
import Item from "antd-mobile/lib/popover/Item"

import { Tabs, WhiteSpace, Badge } from 'antd-mobile';
const tabs = [
  { title: "艺人信息" },
  { title: "专辑" },

];

class ShoucangPlayer extends React.Component {

  constructor(props){
    super(props)
    this.state = {
      geshou_pic:"",
      geshou_name:"",
      geshou_zhuanji:[],
      geshou_info:""
    }
  }
  componentDidMount(){
    console.log(this.props);
    let qr = queryString.parse(this.props.location.search)
    console.log(qr)
    get_geshou_zhuanji(qr.id)
    .then(body=>body.json())
    .then(res=>{
      console.log(res);
        this.setState({
          geshou_pic:res.artist.picUrl,
          geshou_name:res.artist.name,
          geshou_zhuanji:res.hotAlbums,
          // geshou_info:res.briefDesc
      })
      console.log(this.state.geshou_zhuanji);
    })
    get_geshou_info(qr.id)
    .then(body=>body.json())
    .then(res=>{
      console.log(res);
        this.setState({
          geshou_info:res.briefDesc
      })
      console.log(this.state.geshou_info);
    })


  }

  render(){
    return (
      <div className={myStyle.ShoucangPlayer}>
        <ShoucangPlayer_Navbar></ShoucangPlayer_Navbar>
        
        
        <div className={myStyle.ShoucangPlayer_Tabs}>
          <img src={this.state.geshou_pic} alt=""/>
          <h2>{this.state.geshou_name}</h2>
        </div>
        <Tabs tabs={tabs}
        initialPage={1}
        onChange={(tab, index) => { console.log('onChange', index, tab); }}
        onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
        >

        <div style={{padding:"0 20px"}}>
          <h2>{this.state.geshou_name+"简介"}</h2>
          <h3>{this.state.geshou_info}</h3>

        </div>

        <ul className={myStyle.playerlist}>
          {this.state.geshou_zhuanji.map(item=><li key={item.id} style={{display:'flex',marginBottom:'10px',height:"50px"}}>
            <img src={item.blurPicUrl} alt="" style={{width:'50px',height:'50px'}}/>
            <div style={{display:'flex',flexDirection:'column'}}>
              <span style={{marginBottom:"10px",marginTop:"5px",fontWeight:700}}>{item.name}</span>
              <span>{"歌曲"+item.size}</span>
            </div>
          </li>)}
        </ul>

            
      </Tabs>

        
      </div>
    )
  }
}

export default ShoucangPlayer